<html>

<head>
    <title>签到排名</title>
    <!-- <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> -->
    <!-- <script src="http://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="http://cdn.staticfile.org/vue/2.5.17/vue.min.js"></script>
    <script src="http://cdn.staticfile.org/semantic-ui/2.3.3/semantic.min.js"></script>
    <!-- <script src="http://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> -->
    <link href="http://cdn.staticfile.org/semantic-ui/2.3.3/semantic.min.css" rel="stylesheet">
    <!-- <script src="http://cdn.staticfile.org/blueimp-md5/2.10.0/js/md5.js"></script> -->
</head>

<body style="background-color: rgb(236, 233, 233)">
    <script>
        document.onreadystatechange=()=>{
            new Vue({
                delimiters: ["{[", "]}"],
                el: "#main", data: {
                    groups: [], currentGroup: "", ok: false, loading: true, groupData: [], buffer: {}
                }, methods: {
                    switchGroup(groupID) {
                        this.currentGroup = groupID;
                        this.loading = true;
                        if (this.buffer[groupID]) {
                            vue.groupData = this.buffer[groupID];
                            vue.loading = false;
                        } else {
                            $.post("/api/credit/get_by_group/" + groupID).done((ret) => {
                                ret = JSON.parse(ret);
                                if (ret.ok) {
                                    console.log(ret);
                                    vue.groupData = ret.result;
                                    vue.loading = false;
                                    this.buffer[groupID] = ret.result;

                                }
                            });
                        }
                    }
                }
            });
        };
    </script>

    <div class="ui main container" style="margin-top:70px;margin-bottom:70px" id="main">
        <div style="top: 10%" v-if="ok">
            <div class="ui header">
                <h1>签到排名</h1>
            </div>
            <div class="ui two column grid">
                <div class="ui four wide column">
                    <div class="ui vertical pointing menu">
                        <a v-for="val,key in groups" class="ui item" v-bind:class="{active:key==currentGroup}"
                            v-on:click="switchGroup(key)">
                            <div class="ui header">
                                <h4>{[val]}</h4>
                            </div>
                            {[key]}
                        </a>
                    </div>
                </div>
                <div class="ui twelve wide column">
                    <div class="ui segment stacked" style="min-height: 400px;">
                        <div class="ui inverted active dimmer" v-if="loading">
                            <div class="ui loader"></div>
                        </div>
                        <table class="ui celled table">
                            <thead>
                                <tr>
                                    <th>排名</th>
                                    <th>QQ号</th>
                                    <th>昵称</th>
                                    <th>积分</th>
                                    <th>最后签到日期</th>
                                    <th>连续签到次数</th>
                                    <th>总签到次数</th>
                                    <th>本月签到次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="item,i in groupData">
                                    <td>{[i+1]}</td>
                                    <td>{[item.id]}</td>
                                    <td>{[item.name]}</td>
                                    <td>{[item.rating]}</td>
                                    <td>{[item.date]}</td>
                                    <td>{[item.days]}</td>
                                    <td>{[item.times_all]}</td>
                                    <td>{[item.times_month]}</td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <div class="ui inverted active dimmer" v-if="!ok">
            <div class="ui loader"></div>
        </div>
    </div>
    <div class="ui center aligned  container">
        <div style="color: darkgrey">
            Powered by MikuNotFoundException.<br>
            QQ:814980678
        </div>
    </div>
    <div class="ui modal" id="base-message-box">
        <div class="header">消息</div>
        <div class="content">
            <p></p>
        </div>
        <div class="actions">
            <div class="ui approve button">
                确定
            </div>
        </div>
    </div>
</body>

</html>